<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/page.css"/>
    <style>
        #cost-record-app .notAdmin::after {
            border: 0 !important;
        }

        .search-btn {
            margin-left: 20px;
        }

        .info-box {
            margin: -15px -44px 20px;
        }

        .info-box .item-box {
            display: flex;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            text-align: left;
            margin-bottom: 14px;
        }

        .info-box .item-box:last-child {
            margin-bottom: 0;
        }

        .info-box .item-box .label {
            width: 96px;
        }

        .info-box .item-box .des {
            flex: 1;
            color: #333333;
        }

        .el-range-input {
            width: 35% !important;

        }

        .el-date-editor .el-range__close-icon {
            width: 13% !important;
        }

        .el-date-editor .el-range-separator {
            width: 10% !important;
        }

        .el-dropdown {
            vertical-align: top;
        }

        .el-dropdown + .el-dropdown {
            margin-left: 15px;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }

        .bsType {
            margin-left: 20px;
        }

        .tableBox {
            text-align-last: center;
        }

        .tableBar {
            overflow: hidden;
        }

        .left-float {
            float: left;
        }

        .right-float {
            float: right;
        }
    </style>
</head>
<body>
<div class="dashboard-container" id="cost-record-app">
    <div class="container">
        <!-- 搜索栏 -->
        <div class="tableBar">
            <div class="left-float">
                <el-date-picker v-model="costTime"
                                clearable
                                value-format="yyyy-MM-dd HH:mm:ss"
                                type="datetimerange"
                                placeholder="选择日期"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                style="width: 340px;"
                ></el-date-picker>
                <template>
                    <el-select v-model="value" placeholder="业务类型" class="bsType" @change="handleCommand">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <el-button type="primary" class="search-btn" @click="init">查询</el-button>
            </div>
            <div class="right-float">
                <!--                <span class="span-btn delBut non" @click="deleteHandle('批量', null)">批量删除</span>-->
                <el-button type="primary" @click="toClearing" style="margin-left: 1rem"> + 添加收支记录</el-button>
                </el-button>
            </div>
        </div>
        <!-- 表格 -->
        <el-table
                :data="tableData"
                stripe
                class="tableBox"
        >
            <el-table-column
                    prop="bsType"
                    label="收入 / 支出"
                    :formatter="formatBsType"
            ></el-table-column>
            <el-table-column
                    prop="bsDesc"
                    label="收支项目"
            ></el-table-column>
            <el-table-column
                    prop="specification"
                    label="规格"
            ></el-table-column>
            <el-table-column
                    prop="numbers"
                    label="数量"
            ></el-table-column>
            <el-table-column
                    prop="costAmount"
                    label="交易金额"
            ></el-table-column>
            <el-table-column
                    prop="operator"
                    label="操作人"
            ></el-table-column>
            <el-table-column
                    prop="createTime"
                    label="操作时间"
            ></el-table-column>
            <el-table-column
                    label="操作"
                    width="160"
            >
                <template slot-scope="scope">
                    <el-button
                            type="text"
                            size="small"
                            class="delBut non"
                            @click="deleteHandle('单删', scope.row.id)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 弹窗 -->
        <el-dialog
                :title="costData.title"
                :visible.sync="costData.dialogVisible"
                width="30%"
                :before-close="handleClose"
                :modal-append-to-body="false"
        >
            <el-form
                    :model="costData"
                    :rules="rules"
                    ref="costForm"
                    label-width="100px"
            >
                <el-form-item label="收支项目：" prop="bsDesc">
                    <el-input
                            v-model="costData.bsDesc"
                            maxlength="14"
                            show-word-limit
                            placeholder="请输入收支项目"
                    />
                </el-form-item>
                <el-form-item
                        label="交易金额："
                        prop="costAmount"
                >
                    <el-input
                            v-model="costData.costAmount"
                            placeholder="请输入金额"
                            maxlength="14"
                    />
                </el-form-item>
                <el-form-item
                        label="规格："
                        prop="specification"
                >
                    <el-input
                            v-model="costData.specification"
                            placeholder="请输入规格"
                            maxlength="14"
                    />
                </el-form-item>
                <el-form-item
                        label="数量："
                        prop="numbers"
                >
                    <el-input
                            v-model="costData.numbers"
                            placeholder="请输入数量"
                            maxlength="14"
                    />
                </el-form-item>
                <el-form-item
                        label="交易类型:"
                        prop="bsType"
                >
                    <el-radio-group v-model="costData.bsType">
                        <el-radio label="1">收入</el-radio>
                        <el-radio label="2">支出</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span
                    slot="footer"
                    class="dialog-footer"
            >
                <el-button
                        size="medium"
                        @click="costData.dialogVisible = false">
                    取 消
                </el-button>
                <el-button
                        type="primary"
                        size="medium"
                        @click="submitForm(false)">
                    保 存
                </el-button>
                <el-button
                        type="primary"
                        size="medium"
                        class="continue"
                        @click="submitForm(true)">
                    保存并继续添加
                </el-button>
      </span>
        </el-dialog>
        <!-- 分页组件 -->
        <el-pagination
                class="pageList"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts"
                :current-page.sync="page"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vueMax.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/costRecord.js"></script>
<script src="../../js/index.js"></script>
<script>
    new Vue({
        el: '#cost-record-app',
        data() {
            return {
                counts: 0,
                page: 1,
                pageSize: 10,
                beginTime: '',
                endTime: '',
                tableData: [],
                checkList: [],
                bsType: '',
                costTime: '',
                options: [{
                    value: '1',
                    label: '收入'
                }, {
                    value: '2',
                    label: '支出'
                }],
                value: '',
                costData:
                    {
                        'title': '收入 / 支出',
                        'dialogVisible': false,
                        'costAmount': '',
                        'specification': '',
                        'numbers': '',
                        'bsType': '',
                        'bsDesc': ''
                    },
                rules: {
                    bsDesc: [{required: true, message: '收支项目不能为空', trigger: 'blur'}],
                    costAmount: [{required: true, message: '交易金额不能为空', trigger: 'blur'}],
                    bsType: [{required: true, message: '交易类型不能为空', trigger: 'change'}],
                    numbers: [{required: true, message: '数量不可为空', trigger: 'change'}],
                    specification: [{required: true, message: '规格不可为空', trigger: 'change'}],
                }
            }
        },
        computed: {},
        created() {
            this.init()
            this.user = JSON.parse(localStorage.getItem('userInfo')).username
        },
        mounted() {
        },
        watch: {
            costTime(val) {
                if (val && val.length >= 2) {
                    this.beginTime = val[0]
                    this.endTime = val[1]
                } else {
                    this.beginTime = ''
                    this.endTime = ''
                }
            }
        },
        methods: {
            async init() {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    bsType: this.bsType,
                    beginTime: this.beginTime,
                    endTime: this.endTime,
                    bsDesc: this.bsDesc
                }
                await getDailyPage(params).then(res => {
                    if (String(res.code) === '1') {
                        this.tableData = res.data.records || []
                        this.counts = res.data.total
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.page = 1;
                this.init()
            },
            handleCurrentChange(val) {
                this.page = val
                this.init()
            },
            // 业务类型处理
            formatBsType(row, column, type, index) {
                switch (type) {
                    case 1:
                        return "收入";
                    case 2:
                        return "支出";
                }
            },
            // 业务选择
            handleCommand(value) {
                switch (value) {
                    case "1": // 充值
                        this.bsType = 1
                        this.init()
                        break;
                    case "2": // 扣费
                        this.bsType = 2
                        this.init()
                        break;
                }
            },
            // 添加日常记录
            submitForm(isGoOn) {
                this.$refs.costForm.validate((valid) => {
                    if (valid) {
                        const reg = /^-?\d+(\.\d+)?$/;
                        // 判断输入金额是否为数字
                        if (reg.test(this.costData.costAmount) && reg.test(this.costData.numbers)) {
                            addDailyRecord({
                                'costAmount': this.costData.costAmount,
                                'bsType': this.costData.bsType,
                                'bsDesc': this.costData.bsDesc,
                                'specification': this.costData.specification,
                                'numbers': this.costData.numbers
                            }).then(res => {
                                if (res.code === 1) {
                                    this.$message.success('操作成功！');
                                } else {
                                    this.$message.error(res.msg || '操作失败');
                                }
                                if (isGoOn) {
                                    // 保留 dialogVisible 状态
                                    const dialogVisible = this.costData.dialogVisible;
                                    this.costData = {
                                        'costAmount': '',
                                        'bsType': '',
                                        'bsDesc': '',
                                        'specification': '',
                                        'numbers': '',
                                        'dialogVisible': dialogVisible // 确保 dialogVisible 的值不变
                                    };
                                    this.$refs.costForm.resetFields();
                                } else {
                                    this.$refs.costForm.resetFields()
                                    this.costData.dialogVisible = false;
                                    this.init();
                                }
                            }).catch(err => {
                                this.$message.error('请求出错了：' + err);
                            });
                        } else {
                            this.$message.error('只能输入数字类型');
                        }
                    } else {
                        this.$message.error('请确保所有必填项都已填写');
                        return false;
                    }
                });
            },
            // 关闭弹窗
            handleClose() {
                this.$refs.costForm.resetFields()
                this.costData.dialogVisible = false
            },
            // 充值消费业务
            toClearing() {
                this.costData.bsType = ''
                this.costData.costAmount = ''
                this.costData.bsDesc = ''
                this.costData.specification = ''
                this.costData.numbers = ''
                this.costData.dialogVisible = true
            },
            // 删除
            deleteHandle(type, id) {
                if (type === '批量' && id === null) {
                    if (this.checkList.length === 0) {
                        return this.$message.error('请选择删除对象')
                    }
                }
                this.$confirm('确认删除该记录, 是否继续?', '确定删除', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                }).then(() => {
                    deleteRecord(type === '批量' ? this.checkList.join(',') : id).then(res => {
                        if (res.code === 1) {
                            this.$message.success('删除成功！')
                            this.init()
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                })
            },
            // 全选操作
            handleSelectionChange(val) {
                let checkArr = []
                val.forEach((n) => {
                    checkArr.push(n.id)
                })
                this.checkList = checkArr
            },
        }
    })
</script>
</body>
</html>
